<script setup>
import { inject, onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router';
import 'viewerjs/dist/viewer.min.css'
import 'viewerjs/dist/viewer.min.js'
import Viewer from 'viewerjs';
import Header from '@/components/Header.vue'
import LogoMin from '@/components/svg/logo-min.vue'
import ArrowRight from "@/components/svg/arrow-right.vue";
import {ArrowRightBold} from "@element-plus/icons-vue";

let isVerticalScreen = inject("isVerticalScreen");

// 循环播放的图片列表
const picList = ref([
  "/message-plus-core/home_pic/img.png",
  "/message-plus-core/home_pic/img_1.png"
]);


function backGround() {
  var r = Math.floor(Math.random() * 360);
  var g = Math.floor(Math.random() * 360);
  return `rgb(20,20,25)`;
}
function backGrounds(){
  var r = Math.floor(Math.random()*256);
  var g = Math.floor(Math.random()*256);
  return `rgb(253,254,255)`;
}

const router = useRouter();
function goNav() {
  // router.push('/nav');
  window.location.href = 'https://www.red-coral.cn/doc/mpc/';
}

let isBlackMode = inject('isBlackMode');
watch(() => isBlackMode.value, (newValue) => {
  if(isBlackMode.value) {
    document.body.style.background = backGround();
    document.body.style.color = '#fff';
  } else {
    document.body.style.color = '#213547';
    document.body.style.background = backGrounds();
  }
});

onMounted(()=>{
  if(isBlackMode.value) {
    document.body.style.background = backGround();
    document.body.style.color = '#fff';
  } else {
    document.body.style.color = '#213547';
    document.body.style.background = backGrounds();
  }
});

</script>
<template>
  <Header :is-home="true"></Header>
  <!-- 1 -->
  <table class="home1" border="0">
    <tbody v-if="!isVerticalScreen" align="left">
      <tr>
        <td style="width: 40%; height: 300px; font-family: var(--rc-font-family)">
          <div style="font-size: 60px; font-weight: 1000; background: linear-gradient(45deg, #333, #666); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">消息增强核心</div>
          <div style="font-size: 15px; font-weight: 300; line-height: 1.8; margin-top: 20px; opacity: 0.85;">消息增强核心（message-plus-core）基于Netty网络框架创造的高性能通讯框架，提供基础的路径请求、语音请求等基础请求类型，同时支持强大的注解式自定义请求类和自定义请求处理器；并且框架自带群组及聊天室功能，使用提供的工具类即可快速调用。该框架不提供过多的实际功能，但是提供更多的接口定义，保证开发者可以自由开发。</div>
        </td>
        <td rowspan="2" align="center">
          <div style="width: 300px; height: 300px; position: relative;">
            <div class="logo_min_background"></div>
            <logo-min style="position: absolute; left: 100px; top: 100px; width: 100px; height: 100px;"></logo-min>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <button class="home_btn" @click="goNav">
            <span>立即使用</span><el-icon><ArrowRightBold /></el-icon>
          </button>
        </td>
      </tr>
    </tbody>
    <tbody v-else>
      <tr>
        <td>
          <div style="width: 300px; height: 300px; position: relative; margin: 0 auto;">
            <div class="logo_min_background"></div>
            <logo-min style="position: absolute; left: 100px; top: 100px; width: 100px; height: 100px"></logo-min>
          </div>
        </td>
      </tr>
      <tr>
        <td style="padding: 20px; font-family: var(--rc-font-family); text-align: center;">
          <div :style="{
            'font-size': isVerticalScreen ? '40px' : '60px',
            'font-weight': '1000',
            'background': isBlackMode ? 'linear-gradient(45deg, #2B5876, #4E4376)' : 'linear-gradient(45deg, #36D1DC, #5B86E5)',
            '-webkit-background-clip': 'text',
            '-webkit-text-fill-color': 'transparent',
            'margin-bottom': '20px'
          }">消息增强核心</div>
          <div style="font-size: 14px; font-weight: 300; line-height: 1.8; opacity: 0.85; max-width: 90vw; margin: 0 auto;">消息增强核心（message-plus-core）基于Netty网络框架创造的高性能通讯框架，提供基础的路径请求、语音请求等基础请求类型，同时支持强大的注解式自定义请求类和自定义请求处理器；并且框架自带群组及聊天室功能，使用提供的工具类即可快速调用。该框架不提供过多的实际功能，但是提供更多的接口定义，保证开发者可以自由开发。</div>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">
          <button class="home_btn" @click="goNav" style="margin-top: 30px">
            <span>立即使用</span><el-icon><ArrowRightBold /></el-icon>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- 2 -->
  <div style="width: 100vw; height: 40vh"></div>
  <!-- 底部栏 -->
  <div style="position: relative; overflow: hidden;">
    <div class="home_bottom_background"></div>
    <table class="home_bottom" border="0" :style="{'margin': isVerticalScreen?'0':'0 20vw', 'width': isVerticalScreen?'100vw':'60vw'}">
      <tbody>
      <tr>
        <td>
          <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" style="color: inherit;">陕ICP备2023014750号-1</a>
        </td>
        <td>red_coral20240606@163.com</td>
      </tr>
      </tbody>
    </table>
  </div>

</template>
<style scoped>
:root {
  --rc-font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

p {
  font-size: 24px;
}
/*
button {
  width: 300px;
  height: 50px;
  font-size: 24px;
  line-height: 0;
  background-color: rgb(146, 84, 222);
  color: #fff;
  transition: all 0.2s ease-in-out;
  z-index: 10;
}
button:hover{
  filter: drop-shadow(0 0 1em #646cffaa);
  color: rgba(255,255,255,1);
}
*/
.logo {
  height: 8em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}


.home1 {
  width: 70vw;
  margin: 80px 15vw 0 15vw;
  border: none;
  border-collapse: collapse;
}
.home1 td {
  border: none;
}

.logo_min_background {
  position: absolute;
  left: 10px; top: 25px;
  width: 280px; height: 250px;
  background-image: linear-gradient(-45deg, #2B5876 50%, #4E4376 50%);
  filter: blur(68px);
  transform: scale(1.4);
}

.home_btn {
  display: inline-flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #2B5876, #4E4376);
  font-size: 16px;
  height: 45px;
  width: 130px;
  line-height: 100%;
  padding: 0 20px;
  border-radius: 25px;
  color: white;
  box-shadow: 0 4px 15px rgba(43, 88, 118, 0.3);
  border: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.home_btn span {
  width: 80px;
  transition: 0.3s ease-in-out;
  color: white;
  line-height: 45px;
  height: 45px;
}

.home_btn svg {
  width: 20px;
  height: 45px;
  padding-left: 5px;
  transition: 0.3s ease-in-out;
  transform: scale(1.2);
  color: white;
}

.home_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(78, 67, 118, 0.4);
  background: linear-gradient(45deg, #4E4376, #2B5876);
}

.home_btn:hover span {
  width: 90px;
}

.home_btn:hover svg {
  width: 0;
  transform: translateX(10px);
}

.home_bottom_background {
  position: absolute;
  bottom: -50vw;
  left: 10vw;
  width: 80vw;
  height: 50vw;
  box-shadow: 0 0 100px 50px rgba(43, 88, 118, 0.2);
  z-index: 0;
  border-radius: 1000px;
}


.home_bottom {
  background-color: rgba(0,0,0,0);
  border: none;
  border-collapse: collapse;
  height: 200px;
  z-index: 2;
}
.home_bottom td {
  border: none;
  font-size: 13px;
}

.home1 {
      width: v-bind("isVerticalScreen ? '90vw' : '70vw'");
      margin: v-bind("isVerticalScreen ? '40px auto 0' : '80px 15vw 0 15vw'");
      border: none;
      border-collapse: collapse;
    }
    
    @media screen and (max-width: 768px) {
      .logo_min_background {
        width: 250px;
        height: 220px;
        left: 25px;
        top: 40px;
      }
      
      .home_btn {
        width: 120px;
        height: 40px;
        font-size: 15px;
      }
    }
</style>
